<template>
  <div>
    <el-button type="primary" icon="el-icon-search" plain style="margin-bottom: 20px" @click="dialogCouponChoose = true">
      选择优惠券
    </el-button>
    <el-card shadow="hover" :body-style="{ padding: '0px' }">
      <u-table
        :data="list"
        :page="false"
        :columns="columns_coupon"
        :options="{ headerCellStyle: { background:'#FAFAFA'} }"
      >
        <template v-slot:right>

          <template v-if="number">
            <el-table-column :key="tablekey" label="每人发送张数" align="center" fixed="right">
              <template slot-scope="{ row }">
                <el-input-number v-model="row.num" placeholder="请输入数量" :min="1" :max="1000" clearable style="width: 150px" @change="inputChange($event,'row')" />
              </template>
            </el-table-column>
          </template>

          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="remove(row)">移除</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </el-card>

    <!-- 优惠券选择器 -->
    <coupon v-model="dialogCouponChoose" :multiple="multiple" :data="list" :valid="valid" @change="changeData" />

  </div>

</template>

<script>
/**
 * 业务组件 - 优惠券选择组件
 */
import coupon from '@/components/coupon/coupon'
export default {
  name: 'UesCoupon',
  components: {
    coupon
  },
  props: {
    /** 数据源 */
    value: {
      type: String,
      default: ''
    },
    /** 是否多选,默认单选 */
    multiple: {
      type: Boolean,
      default: false
    },
    /** 是否显示有效优惠券 */
    valid: {
      type: Boolean,
      default: false
    },
    /** 是否选择数量,默认不显示 */
    number: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      api: this.$u.api.MarketCouponData,
      // 选择的卡券
      columns_coupon: [
        {
          prop: 'name',
          label: '优惠券名称'
        },
        {
          prop: 'validityDate',
          label: '有效期日期',
          width: '180',
          render: (h, params) => {
            let { beginDate, endDate } = params.row
            if (!beginDate) {
              beginDate = '不限制'
            }
            if (!endDate) {
              endDate = '不限制'
            }
            return [
              h('el-tag', { props: { effect: 'plain' }}, '起始:' + beginDate),
              h('br'),
              h('el-tag', { props: { effect: 'plain' }}, '终止:' + endDate)
            ]
          }
        },
        {
          prop: 'templateId',
          label: '模板ID',
          width: '80'
        },
        {
          prop: 'status',
          label: '状态',
          render: (h, params) => {
            const { status, status_text } = params.row
            let type = 'success'
            switch (status) {
              case 0:
                type = 'warning'
                break
              case 1:
                type = 'success'
                break
              case 2:
                type = 'danger'
                break
              case 3:
                type = 'danger'
                break
            }

            return h('el-tag', { props: { type: type }}, status_text)
          }
        }
      ],
      // 选中的优惠券
      list: [],
      // 优惠券选择器弹窗状态
      dialogCouponChoose: false,
      tablekey: false
    }
  },
  watch: {
    // 监听数据
    value: {
      immediate: true,
      handler(val) {
        // 初始化数据
        this.loadData(val)
      }
    }
  },
  methods: {
    // 初始化数据
    async loadData(val) {
      // console.log('初始化 -> 准备初始化')
      if (val) {
        // console.log('初始化 -> 有数据')
        // console.log(this.list)
        // console.log(this.list.length)

        if (this.list.length === 0) {
          this.list = []
          const ids = val.split(',')
          for (const coupon of ids) {
            const id = coupon.split('#')[0]
            const num = coupon.split('#')[1]
            const res = await this.api.fetch({ id })
            const { data } = res
            if (data) {
              data.num = num
              this.list.push(data)
            }
          }
        } else {
          // console.log('初始化 -> 执行验证数据,列表有数据')
          // 是否选择数量
          if (this.number) {
            // console.log('初始化数据 -> 是否选择数量')
            // 初始化数据
            this.list.map(item => {
              item.num = item.num ? item.num : 1
            })
          }
        }
      } else {
        // console.log('初始化 -> 无数据')
        this.list = []
      }
    },
    // 通知数据更新
    change() {
      const { list } = this
      // console.log('通知 -> 数据更新')
      // console.log(list)

      // 优惠券ID+数量
      let ids = []
      if (list.length > 0) {
        ids = list.map(item => { return item.id + '#' + (item.num ? item.num : 1) })
      }
      this.dataForm.couponId = ids.toString()
      // console.log('通知 -> 数据结果')
      // console.log(ids.toString())

      // 通知数据 -> 绑定数据,返回为字符串 1,2,3
      this.$emit('input', ids.toString())
      // 通知数据 -> 绑定值被改变时触发,返回为数组列表
      this.$emit('change', list)
    },
    // 移除优惠券
    remove(row) {
      const self = this
      this.$confirm('确认移除【' + row.name + '】优惠券吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        // 处理确认事件
        self.list.splice(self.list.findIndex(item => item.id === row.id), 1)
        // 通知数据更新
        self.change()
      }).catch(() => {
      })
    },
    // 监听 -> 选中变动数据
    changeData(list) {
      // 通知数据更新
      this.list = list
      this.change()
    },
    // 监听 -> input 数量
    inputChange(e, val) {
      this[val] = e
      this.tablekey = !this.tablekey
      this.change()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep{
  .el-input{
    width: 100% !important;
  }
}
</style>
